<template>
	<u-popup :show="showDlog" :closeOnClickOverlay="closeOnClickOverlay" :safeAreaInsetBottom="safeAreaInsetBottom" round="10" :mode="mode" @close="asyClose" closeable>
		<view>
			<view class="title text-al font-32 font-weight  title">
				<slot v-if="$slots.title" name="title"></slot>
				<text v-else>{{title}}</text>
			</view>
			<scroll-view v-if="iscoll" scroll-y="true" :style="{height:height+'rpx'}">
				<slot></slot>
			</scroll-view>
			<view v-else :style="{minHeight:height+'rpx'}">
				<slot></slot>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:''
			},
			// 同uview
			closeable:{
				type:Boolean,
				default:true
			},
			// 是否可滚动
			iscoll:{
				type:Boolean,
				default:false
			},
			safeAreaInsetBottom:{
				type:Boolean,
				default:false
			},
			// 容器高度
			height:{
				type:[Number,String],
				default:300
			},
			mode:{
				// 可以通过mode参数设置，可以设置为left、top、right、bottom、center
				type:String,
				default:'bottom'
			},
			closeOnClickOverlay:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return {
				showDlog:false
			}
		},
		methods:{
			asyClose(){
				this.$emit('close')
				this.showDlog = false
			},
			close(){
				this.showDlog = false
			},
			open(){
				this.showDlog = true
			}
		}
	}
</script>

<style scoped>
.title{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 85rpx;
	box-shadow: 0rpx 5rpx 21rpx 3rpx rgba(0, 0, 0, 0.08)
}
</style>